<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <table border="1px" width="800px">

        <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>手机</th>
            <th>住址</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="student in students" :key="student.id">
            <td>{{ student.id }}</td>
            <td>{{ student.name }}</td>
            <td>{{ student.age }}</td>
            <td>{{ student.gender }}</td>
            <td>{{ student.cellphone }}</td>
            <td>{{ student.address }}</td>
        </tr>
        </tbody>
    </table>
</div>
<!--    导入vue的js文件-->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!--    导入axios文件-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //创建Vue
    new Vue({
        el: '#app',
        data: {
            students: [] //学生集合
        },
        methods:{
            //连接后台，加载学生数据
            loadStudents(){
                //调用axios方法 get\post\delete\put 向后台发出请求
                //then是处理数据
                axios.get('http://localhost:9999/student/list')
                    .then(result => {
                        console.log(result.data)
                        if(result.data.data){
                            //绑定后台的数据到前面的模型中
                            this.students = result.data.data;
                        }
                    });
            }
        },
        //组件挂载完成后调用加载学生方法
        mounted() {
            this.loadStudents();
        }
    })
</script>
</body>
</html>